<template>
    <div class="app" id="app">
        <zlc-header></zlc-header>
        <div class="main">
            <a-config-provider >
                                <router-view></router-view>

<!--                <zlc-home ref="homeCom"></zlc-home>-->
            </a-config-provider>
        </div>
        <div class="footer">
            <!--            <div class="fMain">-->
            <!--                <div class="menuItem" v-for="(item, index) in menu" :key="index" :class="[menuSelected.includes('menu'+index) ? 'on' : 'off']" @click="changeMenu(index)">-->
            <!--                    <div class="title">-->
            <!--                        {{ item.title }}-->
            <!--                    </div>-->
            <!--                    <div class="menuIcon">-->
            <!--                        <svg :t="item.t" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" :p-id="item.svgpId" xmlns:xlink="http://www.w3.org/1999/xlink" style="fontSize: 20px">-->
            <!--                            <path :d="item.d" :p-id="item.pathpId" fill="#8e9db0"></path>-->
            <!--                        </svg>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="leftSecondBar" v-if="typeStr != 0">
                <div class="main" v-gradientTitle @click="showChangeBaseModel">
                    切换基地模型
                </div>
            </div>
        </div>
        <div class="sceneViewer"></div>
        <div class="page-body-mask"></div>
        <!--        切换基地model-->
        <zlc-change-base ref="changeBaseModel"></zlc-change-base>
    </div>
</template>

<script>
import {reactive, ref} from "vue";
import zlcHome from "/src/views/home/index.vue"
import ZlcHeader from "/src/components/zlcHeader/zlcHeader.vue";
import zlcChangeBase from "/src/components/zlcChangeBase/zlcChangeBase.vue";

export default {
    components: {zlcChangeBase, ZlcHeader, zlcHome},
    setup(){
        let homeCom = ref(null) //home组件
        let menu = reactive([
            {
                title: '单位概括',
                router: '/',
                t:"1696813163501",
                svgpId: '1661',
                pathpId: '1662',
                d: "M512 85.333333H256c-46.933333 0-85.333333 38.4-85.333333 85.333334v768h426.666666V170.666667c0-46.933333-38.4-85.333333-85.333333-85.333334zM341.333333 810.666667H256v-85.333334h85.333333v85.333334z m0-170.666667H256v-85.333333h85.333333v85.333333z m0-170.666667H256V384h85.333333v85.333333z m0-170.666666H256V213.333333h85.333333v85.333334z m170.666667 512h-85.333333v-85.333334h85.333333v85.333334z m0-170.666667h-85.333333v-85.333333h85.333333v85.333333z m0-170.666667h-85.333333V384h85.333333v85.333333z m0-170.666666h-85.333333V213.333333h85.333333v85.333334zM768 256h-85.333333c-46.933333 0-85.333333 38.4-85.333334 85.333333v597.333334h256V341.333333c0-46.933333-38.4-85.333333-85.333333-85.333333z m0 554.666667h-85.333333v-85.333334h85.333333v85.333334z m0-170.666667h-85.333333v-85.333333h85.333333v85.333333z m0-170.666667h-85.333333V384h85.333333v85.333333z",
            },
            {
                title: '设备与建筑',
                router: '/deviceBuilding',
                t:"1696813242843",
                svgpId: '5541',
                pathpId: '5542',
                d: 'M661.333333 106.666667h-85.333333c-46.933333 0-85.333333 38.4-85.333333 85.333333v533.333333h-128V192c0-46.933333-38.4-85.333333-85.333334-85.333333H192C145.066667 106.666667 106.666667 145.066667 106.666667 192v640c0 46.933333 38.4 85.333333 85.333333 85.333333h85.333333c46.933333 0 85.333333-38.4 85.333334-85.333333v-42.666667h128v42.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h85.333333c46.933333 0 85.333333-38.4 85.333334-85.333333V192c0-46.933333-38.4-85.333333-85.333334-85.333333zM213.333333 789.333333c-23.466667 0-42.666667-19.2-42.666666-42.666666s19.2-42.666667 42.666666-42.666667 42.666667 19.2 42.666667 42.666667-19.2 42.666667-42.666667 42.666666z m64-554.666666H192c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333h85.333333c12.8 0 21.333333 8.533333 21.333334 21.333333s-8.533333 21.333333-21.333334 21.333334z m320 554.666666c-23.466667 0-42.666667-19.2-42.666666-42.666666s19.2-42.666667 42.666666-42.666667 42.666667 19.2 42.666667 42.666667-19.2 42.666667-42.666667 42.666666z m64-554.666666h-85.333333c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333h85.333333c12.8 0 21.333333 8.533333 21.333334 21.333333s-8.533333 21.333333-21.333334 21.333334z m224-128c-17.066667 0-32 14.933333-32 32v746.666666c0 17.066667 14.933333 32 32 32s32-14.933333 32-32v-746.666666c0-17.066667-14.933333-32-32-32z',
            },
            {
                title: '监控管理',
                t:"1696813265265",
                svgpId: '6624',
                pathpId: '6625',
                d: "M801.74 727.46a66.42 66.42 0 0 1 3.74 6.58l59.82 121.7c26.22 53.34 4.96 118.2-47.48 144.86a104.6 104.6 0 0 1-47.46 11.4H253.64c-58.62 0-106.14-48.34-106.14-108a109.62 109.62 0 0 1 11.2-48.28L218.52 734a60 60 0 0 1 3.74-6.56 393.88 393.88 0 0 0 259.02 97h61.44a393.86 393.86 0 0 0 259.02-96.98zM512 12c203.6 0 368.66 168 368.66 375S715.6 762 512 762 143.34 594.1 143.34 387 308.4 12 512 12z m0 593.74c84.84 0 153.64-69.88 153.66-156.18s-68.7-156.28-153.54-156.3H512c-84.84 0-153.58 70-153.54 156.3s68.76 156.16 153.54 156.18z m3.26-93.74c-34 0-61.44-28-61.44-62.5s27.5-62.5 61.44-62.5 61.44 28 61.44 62.5S549.2 512 515.26 512z",
            },
            {
                title: '基地项目',
                t: '1696813311166',
                svgpId: '9523',
                pathpId: '9524',
                d: 'M901.2 643.7l-47.8-47.8v-50c0-5.9-1.2-11.5-3.4-16.6-4.3-10.2-12.5-18.4-22.7-22.7-5.1-2.2-10.7-3.4-16.6-3.4h-256v-85.3H640c23.5 0 42.7-19.2 42.7-42.7V204.5c0-23.5-19.2-42.7-42.7-42.7H384c-23.5 0-42.7 19.2-42.7 42.7v170.7c0 23.5 19.2 42.7 42.7 42.7h85.3v85.3h-256c-5.9 0-11.5 1.2-16.6 3.4-10.2 4.3-18.4 12.5-22.7 22.7-2.2 5.1-3.4 10.7-3.4 16.6v50l-47.8 47.8c-16.6 16.6-16.6 43.7 0 60.3l60.3 60.3c16.6 16.6 43.7 16.6 60.3 0l60.3-60.3c16.6-16.6 16.6-43.7 0-60.3L256 595.8v-7.3h213.3v85.3c0 2.2 0.9 4 1.2 6.1l-49 49.1c-16.6 16.6-16.6 43.7 0 60.3l60.3 60.3c16.6 16.6 43.7 16.6 60.3 0l60.3-60.3c16.6-16.6 16.6-43.7 0-60.3l-49.1-49.1c0.3-2.1 1.2-3.9 1.2-6.1v-85.3H768v7.3l-47.8 47.8c-16.6 16.6-16.6 43.7 0 60.3l60.3 60.3c16.6 16.6 43.7 16.6 60.3 0l60.3-60.3c16.7-16.5 16.7-43.6 0.1-60.2z',
            }
        ])
        let menuSelected = ref(['menu0'])
        let changeMenu = (val) => {
            if(!val) return
            let has = menuSelected.value.indexOf("menu" + val)
            if(has != -1){
                menuSelected.value = menuSelected.value.filter(item => item != 'menu' + val)
            }else{
                menuSelected.value.push("menu" + val)
            }
            homeCom.value.changeBase(val)
        }
        //切换基地model
        let changeBaseModel = ref(null)
        let showChangeBaseModel = () => {
            changeBaseModel.value.showBaseModel()
        }

        let typeStr = window.typeStr
        return {
            menu,
            menuSelected,
            changeMenu,
            homeCom,
            showChangeBaseModel,
            changeBaseModel,
            typeStr
        }
    }
}
</script>

<style scoped lang="less">
.app{
  width: 100%;
  height: 100%;
  position: relative;
  .sceneViewer{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    pointer-events: none;

    &::before{
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 15%;
      background: linear-gradient(0deg,rgba(0,0,0,.86) 10%,rgba(0,0,0,.7) 50%, rgba(0,0,0,.5) 70%, rgba(0,0,0,0) 99%);
      z-index: 1;
    }
    &::after{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 15%;
      background: linear-gradient(180deg,rgba(0,0,0,.86) 10%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 99%);
      z-index: 1;
    }
  }
  .page-body-mask{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    pointer-events: none;
    &::before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 25%;
      background: linear-gradient(90deg,rgba(0,0,0,.86) 20%,rgba(0,0,0,.5) 60%,rgba(0,0,0,0) 99%);
    }
    &::after{
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 25%;
      background: linear-gradient(-90deg,rgba(0,0,0,.86) 20%,rgba(0,0,0,.5) 60%,rgba(0,0,0,0) 99%);
    }
  }
  &::after{
    width: 60px;
    height: 100%;
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    content: "";
    background: url("/src/assets/dwgk/3dBaseRight.png") center center no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  &::before{
    width: 60px;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    content: "";
    background: url("/src/assets/dwgk/3dBaseLeft.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .main{
    width: 100%;
    height: 100%;
    position: relative;
    //&::before{
    //    width: 100%;
    //    height: 100%;
    //    content: "";
    //    position: absolute;
    //    z-index: 1;
    //    left: 0;
    //    top: 0;
    //    pointer-events: none;
    //    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    //}
    //&::after{
    //    width: 33%;
    //    height: 100%;
    //    content: "";
    //    position: absolute;
    //    z-index: 1;
    //    right: 0;
    //    top: 0;
    //    pointer-events: none;
    //    background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    //}
  }
  .footer{
    width: 100%;
    height: 64px;
    position: absolute;
    z-index: 2;
    bottom: 0;
    background: url('/src/assets/dwgk/3dBaseFooter.png') center no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    .leftSecondBar{
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      top: 12%;
      background: url("/src/assets/getBases.png") center center no-repeat;
      background-size: 100% 100%;
      .main{
        width: 185px;
        height: 42px;
        line-height: 42px;
        font-size: 20px;
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        cursor: pointer;
      }
    }

  }
}
</style>
